<sv-container  style="margin-bottom: 20px;">
    <sv-title>支付信息</sv-title>
</sv-container>
<form nz-form  [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">
    <nz-form-item>
      <nz-form-label [nzSpan]="2">当前状态</nz-form-label>
      <nz-form-control [nzSpan]="8">
            <div>{{openStatus}}</div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired>费用选项</nz-form-label>
      <nz-form-control [nzSpan]="8" nzErrorTip="费用项不能为空!" >
        <nz-select nzShowSearch nzAllowClear formControlName="costName" (ngModelChange)="costChange($event)">
            <nz-option nzLabel="" nzValue=""></nz-option>>
            <nz-option nzLabel="{{item.costName}}" nzValue="{{item.id}}" *ngFor="let item of costList"></nz-option>
          </nz-select>
          <!-- <input nz-input  placeholder="" (blur)="iptBlur()" [(ngModel)]="cardNo" formControlName="cardNo"/> -->
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2" nzRequired>有效期</nz-form-label>
      <nz-form-control [nzSpan]="18">
            <ul class="monthBox">
                <li *ngFor="let item of yearList index as i" [ngClass]="{'curr':item.selected}" (click)="yearClick(item,i)">
                    {{item.value}}
                </li>
            </ul>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="2">有效期显示</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <div>{{initDate}} ~ {{selectedDate}}</div>
      </nz-form-control>
    </nz-form-item>
    <sv-container col="1" labelWidth="100" >
        <sv-title>费用统计</sv-title>
        <sv label="费用项/月">{{costMoney}}元</sv>
        <sv label="有效期">{{initDate}} ~ {{selectedDate}}</sv>
        <sv label="总计">{{totalMoney}}元</sv>
    </sv-container>
    <nz-form-item style="text-align: center;">
      <nz-form-control [nzOffset]="7" [nzSpan]="12">
        <button nz-button nzType="primary">提交</button>
        <button nz-button (click)="resetForm($event)">重置</button>
      </nz-form-control>
    </nz-form-item>
  </form>
